//TODO: 待完善loading。。。
import { defineComponent, computed } from "vue";
import { buttonProps } from "./buttonTypes";
import { prefixCls } from "@/utils/prefix-class";

/** 组件页面，输出组件demo */
export default defineComponent({
  name: "MyButton",
  props: buttonProps(),
  setup(props, { slots }) {
    /** 生成渲染样式 */
    const classes = computed(() => {
      const { type, size, round, plain, disabled } = props;
      const pre = prefixCls("button");
      return {
        [`${pre}`]: true,
        [`${pre}--${type}`]: type,
        [`${pre}--${size}`]: size,
        [`is-round`]: round,
        [`is-plain`]: plain,
        [`is-disabled`]: disabled,
      };
    });

    /** 组合按钮属性 */
    const buttonProp = {
      class: [classes.value],
      type: props.nativeType,
      onClick: props.onClick,
      onMousedown: props.onMousedown,
    };

    /** 渲染函数 */
    return () => (
      <button {...buttonProp}>{slots.default && slots.default()}</button>
    );
  },
});
